import React from 'react'
import { Menu, Layout } from 'antd'
import { useNavigate } from "react-router-dom";

import './Appaside.scss'
import {
    BorderOutlined, GithubOutlined,
    TableOutlined, HeartTwoTone, CiCircleOutlined,
    FileTextOutlined, AppstoreTwoTone, HomeOutlined,
    LinkOutlined
} from '@ant-design/icons';
import { useStor } from '../../store'
import { observer } from 'mobx-react-lite'
const { Sider } = Layout
function Appaside() {
    const { collapsedStore, userStroe } = useStor()
    const navigate = useNavigate();

    const permissions = userStroe.user.permissions

    // const permissions = [
    //     { key: '/', label: "首页", path: "/", icon: <HomeOutlined />, element: "" },
    //     {
    //         key: '/public',
    //         label: "通用",
    //         path: "/public",
    //         icon: <AppstoreTwoTone />,
    //         children: [
    //             { key: '/buttons', label: "按钮", path: "/buttons", icon: <BorderOutlined />, element: "" },
    //             { key: '/icons', label: "图标", path: "/icons", icon: <CiCircleOutlined />, element: "" },
    //             {
    //                 key: '/others',
    //                 label: "其他",
    //                 path: "/others",
    //                 icon: <LinkOutlined />,
    //                 children: [
    //                     { key: '/tables', label: "表格", path: "/tables", icon: <TableOutlined />, element: "" },
    //                     { key: '/texts', label: "富文本", path: "/texts", icon: <FileTextOutlined />, element: "" },
    //                 ],
    //             },
    //         ],
    //     },
    //     { key: 'abouts', label: "关于", path: "/abouts", icon: <HeartTwoTone twoToneColor="#eb2f96" />, element: "" },
    // ];

    function getItem(key, icon, label, path, children) {
        return {
            key,
            icon,
            label,
            path,
            children,
        };
    }
    let items = [];

    const persePermission = (ps) => {
        ps.forEach((p) => {
            //   console.log(p);
            if (p.children) {
                let children = [];
                p.children.forEach((p1) => {
                    if (p1.children) {
                        let children1 = [];
                        p1.children.forEach((p2) => {
                            children1.push(getItem(p2.key, p2.label, p2.path, p2.icon));
                        });
                        children.push(
                            getItem(p1.key, p1.label, p1.path, p1.icon, children1)
                        );
                    } else {
                        children.push(getItem(p1.key, p1.label, p1.path, p1.icon));
                    }
                });
                items.push(getItem(p.key, p.label, p.path, p.icon, children));
            } else {
                items.push(getItem(p.key, p.label, p.path, p.icon));
            }
        });
    };
    persePermission(permissions);
    const handclick = (e) => {
        // console.log(e.item.props.path);
        navigate(e.item.props.path);
    }
    return (
        <Sider trigger={null} collapsible collapsed={collapsedStore.collapsed}>
            <div className='logo'><GithubOutlined /></div>
            <Menu onClick={handclick} items={permissions} theme="dark" mode='inline'></Menu>
        </Sider>
    )
}
export default observer(Appaside)